<template>
  <a-table class="business-fee-table" :columns="columns" :data="tableData" :pagination="false" :bordered="false">
    <template #insureKindType="{ record }">
      <sysdict-select v-model="record.insureKindType" allow-clear code="insure_business_kind_type" :popupContainer="popupContainer" />
    </template>
    <template #insuredSum="{ record }">
      <i-input-number style="width: 100%" v-model="record.insuredSum" unit="万元" />
    </template>
    <template #insureAmt="{ record }">
      <i-input-number style="width: 100%" v-model="record.insureAmt" />
    </template>
    <template #operate="{ rowIndex }">
      <div class="table-operator">
        <div class="operate-item operate-minus" v-if="rowIndex < tableData.length - 1" @click="minusRecordFn(rowIndex)"><icon-minus /></div>
        <div class="operate-item operate-plus" v-if="rowIndex == tableData.length - 1" @click="addRecordFn"><icon-plus /></div>
      </div>
    </template>
  </a-table>
</template>

<script setup name="CarManageFormBusinessFeeTable">
  import { Message } from '@arco-design/web-vue'
  const props = defineProps({
    tableData: {
      type: Array,
      default: () => [],
    },
    popupContainer: {
      type: [String, Object],
      default: () => '.page-container',
    },
  })
  const columns = [
    {
      title: '承保险种',
      dataIndex: 'insureKindType',
      slotName: 'insureKindType',
    },
    {
      title: '保额(万元)',
      dataIndex: 'insuredSum',
      slotName: 'insuredSum',
    },
    {
      title: '保险费(元)',
      dataIndex: 'insureAmt',
      slotName: 'insureAmt',
    },
    {
      dataIndex: 'operate',
      slotName: 'operate',
      width: 80,
    },
  ]

  const minusRecordFn = (index) => {
    const tableData = props.tableData
    tableData.splice(index, 1)
  }
  const addRecordFn = () => {
    const tableData = props.tableData
    if (tableData.length < 30) {
      tableData.push({})
    } else {
      Message.warning('最多支持添加30条')
    }
  }
</script>
<style lang="less" scoped>
  .table-operator {
    .operate-item {
      border-radius: 2px;
      display: inline-block;
      font-size: 12px;
      padding: 0 4px;
      cursor: pointer;
    }
    .operate-minus {
      background: #ffece8;
      color: #f53f3f;
    }
    .operate-plus {
      background: #e5e6eb;
      color: #4e5969;
    }
  }
  .business-fee-table {
    width: 100%;
    :deep(.arco-table-td) {
      width: 31%;
    }
  }
</style>
